<script lang="ts" setup>
import type {CSSProperties} from 'vue';
import {computed} from 'vue';

defineOptions({name: 'SvgIcon'});

type IProps = {
  name: string;
  color?: string;
  size?: number | string;
  width?: number | string;
  height?: number | string;
};
const props = withDefaults(defineProps<IProps>(), {
  color: 'currentColor',
  width: 24,
  height: 24,
  size: undefined,
});

const symbolId = computed(() => `#icon-${props.name}`);

const getStyle = computed((): CSSProperties => {
  const {size, width, height, color} = props;
  if (size) {
    return {
      width: size + 'px',
      height: size + 'px',
      color,
    };
  }
  return {
    width: width + 'px',
    height: height + 'px',
    color,
  };
});
</script>
<template>
  <svg aria-hidden="true" :style="getStyle">
    <use :xlink:href="symbolId" fill="currentColor" />
  </svg>
</template>
